<template>
  <div>
    <el-container>
      <el-aside width="400px">
        <el-image
          style="width: 300px; height: 300px; margin: 100px 50px 10px 50px"
          :src="url"
          fit="fill"
        ></el-image>
        <el-upload
          class="upload-demo"
          action="http://47.120.7.70:8060/api/sys/uploadFace"
          :on-success="handleAvatarSuccess"
          :show-file-list="false"
        >
          <el-button size="small" style="margin-left: 150px" type="primary"
            >点击上传</el-button
          >
        </el-upload>
        <el-button
          size="small"
          style="margin: 10px 0 0 140px"
          :disabled="edit"
          type="primary"
          @click="editImage"
          >确认修改头像</el-button
        >
      </el-aside>
      <el-main
        ><el-descriptions
          direction="vertical"
          class="margin-top"
          title="个人信息"
          :column="2"
          border
        >
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-message"></i>
              邮箱
            </template>
            {{ info.email }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-user"></i>
              姓名
            </template>
            {{ info.name }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-mobile"></i>
              电话
            </template>
            {{ info.phone }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-coordinate"></i>
              性别
            </template>
            <el-tag type="info" v-if="info.sex == 'WOMAN'">女性</el-tag>
            <el-tag type="" v-else-if="info.sex == 'MAN'">男性</el-tag>
            <el-tag type="warning" v-else>保密</el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-timer"></i>
              出生日期
            </template>
            {{ this.info.birth }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-map-location"></i>
              地址
            </template>
            {{ info.address }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-open"></i>
              状态
            </template>
            <el-tag type="danger" v-if="info.status == '-1'">删除</el-tag>
            <el-tag type="warning" v-else-if="info.status == '0'">禁用</el-tag>
            <el-tag type="success" v-else>正常</el-tag>
          </el-descriptions-item>
        </el-descriptions></el-main
      >
    </el-container>
    <el-button
      style="margin-left: 420px"
      type="primary"
      @click="dialogVisible = true;editMessage = {...info}"
      >修改个人信息</el-button
    >
    <el-dialog title="修改个人信息" :visible.sync="dialogVisible" width="40%">
      <span
        ><el-card class="filter-container" shadow="never">
          <el-form
            :inline="true"
            :model="editMessage"
            size="small"
            label-width="140px"
          >
          <el-form-item label="姓名:">
              <el-input
                style="width: 203px"
                v-model="editMessage.name"
                placeholder="请输入要修改的姓名"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item label="邮箱:">
              <el-input
                style="width: 203px"
                v-model="editMessage.email"
                placeholder="请输入要修改的邮箱"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item label="家庭住址:">
              <el-input
                style="width: 203px"
                v-model="editMessage.address"
                placeholder="请输入要修改的家庭住址"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item label="手机号:">
              <el-input
                style="width: 203px"
                v-model="editMessage.phone"
                placeholder="请输入要修改的手机号"
                clearable
              ></el-input>
            </el-form-item>
          </el-form> </el-card
      ></span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="(dialogVisible = false), editInfo()"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Cookie from "js-cookie";
export default {
  name: "adminHome",
  data() {
    return {
      info: {
        address: "",
        birth: "",
        createTime: "",
        email: "",
        id: "",
        name: "",
        phone: "",
        sex: "",
        status: "",
        type: "",
        updateTime: "",
        network: "",
      },
      url: "",
      edit: true,
      dialogVisible: false,
      sexOptions: [
        {
          value: "1",
          label: "女性",
        },
        {
          value: "0",
          label: "男性",
        },
        {
          value: "2",
          label: "其他",
        },
        {
          value: "-1",
          label: "保密",
        },
      ],
      editMessage: {
        birth: "",
        name: "",
        sex: "",
      },
    };
  },
  created() {
    this.getinfo();
  },
  methods: {
    getinfo() {
      this.axios
        .get("api/sys/auth/myInfo")
        .then((response) => {
          this.info = response.data.value;
          this.url = this.info.faceUrl
          this.info.birth =
            new Date(response.data.value.birth).getFullYear() +
            "-" +
            (new Date(response.data.value.birth).getMonth() + 1) +
            "-" +
            new Date(response.data.value.birth).getDate();
        })
        .catch((error) => {
          this.$message.error(error);
        });
    },
    handleAvatarSuccess(res) {
      if (res.code != "200") {
        this.$message.error("文件格式不支持");
      } else {
        this.$message({
          message: "上传成功",
          type: "success",
        });
        this.url = res.value;
        this.edit = false;
      }
    },
    editImage() {
      this.axios
        .post("api/sys/auth/sysuser/update?faceUrl=" + this.url + "&sysUserId="+this.info.sysUserId)
        .then((response) => {
          if (response.data.code == "200") {
            this.$message({
              message: "修改成功",
              type: "success",
            });
            this.edit = true;
          } else {
            this.$message.error(response.data.message);
          }
        })
        .catch((error) => {
          this.$message.error("修改失败");
        });
    },
    editInfo() {
      this.axios
        .post(
          "api/sys/auth/sysuser/update?address=" +
            this.editMessage.address +
            "&phone=" +
            this.editMessage.phone +
            "&faceUrl=" +
            "&email=" +
            this.editMessage.email+
            "&name=" +
            this.editMessage.name+
            "&sysUserId=" +
            this.info.sysUserId
        )
        .then((response) => {
          console.log(response);
          if (response.data.code == "200") {
            this.$message({
              message: "修改成功",
              type: "success",
            });
            this.getinfo();
          } else {
            this.$message.error(response.data.message);
          }
        })
        .catch((error) => {
          this.$message.error("修改失败");
        });
    },
  },
};
</script>